<template>
  <div>
    <div class="tabbar">
      <div class="item" @click="to('home')" :class="{on:router_name == 'home'}">
        <div class="iconimg h1"></div>
        <div class="title">首页</div>
      </div>
      <div class="item" @click="to('market')" :class="{on:router_name == 'market'}">
        <div class="iconimg h2"></div>
        <div class="title">市场</div>
      </div>
      <div class="item" @click="to('collection')" :class="{on:router_name == 'collection'}">
        <div class="iconimg h3"></div>
        <div class="title">藏品</div>
      </div>
      <div class="item" @click="to('my')" :class="{on:router_name == 'my'}">
        <div class="iconimg h4"></div>
        <div class="title">我的</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "@vue/reactivity";
import { useRouter ,onBeforeRouteUpdate } from "vue-router";

const router = useRouter();

// 初始化时获取当前路由名称
let router_name = ref('')
router_name.value = router.currentRoute.value.name

// 监听路有变化
onBeforeRouteUpdate( to => { 
  router_name.value = to.name
  console.log('router-name:', to.name)
})

const to = (name) => {
  router.push({ name: name });
};
</script>

<style lang="scss" scoped>

</style>